// 基本信息
import DialogBox from "@/components/DialogBox";
import SelectProductList from "@/components/Sansan/SelectProductList";
import { ElForm } from "element-plus";
import { defineComponent, PropType } from "vue";
import { PublicStore } from "@/stores/modules/public";
import { SYSTEM_ID } from "@/config/config";
interface DeviceForm {
	[key: string]: any;
}
export default defineComponent({
	props: {
		width: String,
		title: String,
		detail: {
			type: Object as PropType<DeviceForm | any>,
			default() {
				return {};
			}
		}
	},
	emits: ["submit"],
	setup(props, { attrs, emit }) {
		type FormInstance = InstanceType<typeof ElForm>;
		const formRef = ref<FormInstance>();
		const formRule = reactive({
			name: [{ required: true, message: "请输入", trigger: "change" }]
		});

		const validData = () => {
			formRef.value?.validate(valid => {
				if (valid) {
					props.detail.productName = productRef.value.state.selected.name;
					emit("submit");
				}
			});
		};
		const publicStore = PublicStore();
		const beforeUpload = (res: any) => {
			console.log(res);
		};
		const uploadSuccess = (res: any) => {
			if (res.code == 200) {
				props.detail.packagePath = res.result;
			}
		};
		const productRef = ref();
		return () => {
			return (
				<DialogBox {...attrs} width={props.width} title={props.title} onConfirm={() => validData()}>
					<el-form model={props.detail} ref={formRef} rules={formRule} label-width="100px">
						<el-form-item label="固件名称" prop="name">
							<el-input v-model={props.detail.name} placeholder="请输入" />
						</el-form-item>
						<el-form-item label="固件版本" prop="version">
							<el-input v-model={props.detail.version} placeholder="请输入" />
						</el-form-item>
						<el-form-item label="所属产品" prop="productId">
							<SelectProductList ref={productRef} v-model={props.detail.productId} />
						</el-form-item>
						<el-form-item label="上传安装包" prop="packagePath">
							<div class="flex w-full">
								<el-input v-model={props.detail.packagePath} class="flex-1" disabled />
								<el-upload
									show-file-list={false}
									before-upload={beforeUpload}
									on-success={uploadSuccess}
									headers={{
										Authentication: publicStore.token,
										systemid: SYSTEM_ID,
										timestamp: Date.now()
									}}
									action="/api/file/upload"
								>
									<el-button>请选择安装包</el-button>
								</el-upload>
							</div>
						</el-form-item>
						<el-form-item label="描述" prop="remark">
							<el-input v-model={props.detail.remark} placeholder="请输入" type="textarea" />
						</el-form-item>
					</el-form>
				</DialogBox>
			);
		};
	}
});
